import { login, updateLoginStatus } from '@/services/UserService';
import {
  CloseOutlined,
  LockOutlined,
  MinusOutlined,
  SettingOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, message } from 'antd';
import styles from './index.less';

export default () => {
  const { peerServer } = useModel('global');
  const { initialState } = useModel('@@initialState');
  const [_message, contextHolder] = message.useMessage();

  return (
    <div
      style={{
        background:
          'linear-gradient(0deg, rgba(25, 38, 86, 0.9), rgba(41, 61, 118, 0.96))',
        height: '100%',
        width: '100%',
      }}
    >
      {contextHolder}
      <div className={styles.topHeader}>
        <div className={styles.softTitle}>
          <div className={styles.imgIcon}>
            <img src="/img/图标@2x.png" />
          </div>
          <div className={styles.title}>可视化综合培训系统</div>
          <div className={styles.win_control}>
            <Button
              type="text"
              icon={<SettingOutlined />}
              onClick={() => {
                window.tm?.ipcRenderer.send('openSettingsWindow');
              }}
            />
            <Button
              type="text"
              icon={<MinusOutlined />}
              onClick={() => {
                window.tm?.ipcRenderer.send('toMin');
              }}
            />
            <Button
              danger
              type="text"
              icon={<CloseOutlined />}
              onClick={() => {
                window.tm?.ipcRenderer.send('toClose');
              }}
            />
          </div>
        </div>
      </div>
      <div style={{ userSelect: 'none' }}>
        <LoginForm
          logo="/favicon.ico"
          title="登录"
          initialValues={{
            account: 'admin',
            password: 'admin',
          }}
          onFinish={async (value) => {
            try {
              const { data } = await login(peerServer, value);
              if (data.status == 200) {
                localStorage.setItem('token', data.data.accessToken);
                localStorage.setItem(
                  'tokenIssueTime',
                  data.data.tokenIssueTime,
                );
                localStorage.setItem(
                  'userInfo',
                  JSON.stringify(data.data.userInfo),
                );
                // data.data.role,
                window.tm?.ipcRenderer.send(
                  'openMainWindow',
                  'admin',
                  data.data?.userInfo?.userName,
                  data.data?.userInfo?.userName,
                  data.data?.userInfo?.avatar === null
                    ? ''
                    : data.data?.userInfo?.avatar,
                  data.data?.userInfo?.id,
                  data.data?.userInfo?.blackWhiteStatus,
                  initialState?.serverIp,
                );
                await updateLoginStatus(peerServer, 1, data.data?.userInfo?.id);
                return true;
              } else {
                _message.error(data.message);
                return false;
              }
            } catch {
              _message.error('连接服务器失败');
              return false;
            }
          }}
        >
          <div
            style={{
              marginBlockEnd: 24,
            }}
          ></div>
          <ProFormText
            name="account"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={'prefixIcon'} />,
            }}
            placeholder={'用户名'}
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />,
            }}
            placeholder={'密码'}
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        </LoginForm>
      </div>
    </div>
  );
};
